import { useNavigate } from 'react-router-dom';
import './user.less';
import { Card } from 'antd-mobile';
import {
  LocationFill, GiftOutline, BillOutline,
  QuestionCircleOutline,
  PayCircleOutline,
  ReceivePaymentOutline,
  TextOutline,
  TruckOutline,
  ChatCheckOutline,
} from 'antd-mobile-icons';
import { getInfo } from '@/utils/storage';
const User = () => {

  const navigate = useNavigate();

  return (
    <>
      <div class="user">

        {getInfo() ? (
          <div class="head-page" v-if="isLogin">
            <div class="head-img">
              <img src={require("@/assets/default-avatar.png")} alt="" />
            </div>
            <div class="info">
              <div class="mobile">shouji</div>
              <div class="vip">
                <van-icon name="diamond-o" />
                普通会员
              </div>
            </div>
          </div>
        ) : (
          <div v-else class="head-page" onClick={() => {
            navigate('/login');
          }}>
            <div class="head-img">
              <img src={require('@/assets/default-avatar.png')} alt="" />
            </div>
            <div class="info">
              <div class="mobile">未登录</div>
              <div class="words">点击登录账号</div>
            </div>
          </div>
        )}




        <div class="my-asset">
          <div class="asset-left">
            <div class="asset-left-item">
              <span>0</span>
              <span>账户余额</span>
            </div>
            <div class="asset-left-item">
              <span>0</span>
              <span>积分</span>
            </div>
            <div class="asset-left-item">
              <span>0</span>
              <span>优惠券</span>
            </div>
          </div>
          <div class="asset-right">
            <div class="asset-right-item">
              <BillOutline fontSize={26} />
              <span>我的钱包</span>
            </div>
          </div>
        </div>
        <div class="order-navbar">
          <div class="order-navbar-item">
            <TextOutline fontSize={26} />
            <span>全部订单</span>
          </div>
          <div class="order-navbar-item">
            <PayCircleOutline fontSize={26} />
            <span>待支付</span>
          </div>
          <div class="order-navbar-item">
            <TruckOutline fontSize={26} />
            <span>待发货</span>
          </div>
          <div class="order-navbar-item">
            <ChatCheckOutline fontSize={26} />
            <span>待收货</span>
          </div>
        </div>

        <div class="service">
          <div class="title">我的服务</div>
          <div class="content">
            <div class="content-item">
              <LocationFill fontSize={30} color='var(--adm-color-danger)' />
              <span>收货地址</span>
            </div>
            <div class="content-item">
              <GiftOutline fontSize={30} color='var(--adm-color-danger)' />
              <span>领券中心</span>
            </div>
            <div class="content-item">
              <BillOutline fontSize={30} color='var(--adm-color-danger)' />
              <span>优惠券</span>
            </div>
            <div class="content-item">
              <QuestionCircleOutline fontSize={30} color='var(--adm-color-danger)' />
              <span>我的帮助</span>
            </div>
            <div class="content-item">
              <PayCircleOutline fontSize={30} color='var(--adm-color-danger)' />
              <span>我的积分</span>
            </div>
            <div class="content-item">
              <ReceivePaymentOutline fontSize={30} color='var(--adm-color-danger)' />
              <span>退换/售后</span>
            </div>
          </div>
        </div>

        <div class="logout-btn">
          <button>退出登录</button>
        </div>
      </div>
    </>
  )
}

export default User;